<template>
  <div id="app">
    <template v-for="(value,i) in categoriesData" :key="i">
      <div class="item">
        <img style="width:40px;height: 40px;" :src="value.pictureUrl" alt="">
        <p>{{value.title}}</p>
      </div>
    </template>
  </div>
</template>

<script setup>
defineProps({
  categoriesData: {
    type: Object,
    default: () => ({})
  }
})
</script>
 
<style lang="less" scoped>
#app {
  display: flex;
  overflow: auto;
  margin: 0 20px;
  text-align: center;
  &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 0px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height:0px;

    }
  .item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    font-size: 12px;
    text-align: center;

  }
}
</style>